<template>

<div class="bbb">

  <div class="slide">
    <!-- 广告图片区域 -->

    <div class="slideshow">
      <div id="left">
       
       <div>
    <el-button style="margin-left:130px"  @click="show3 = !show3">点击展示示页面介绍</el-button>

    <div style="margin-top: 20px; height: 200px;">
      <el-collapse-transition>
        <div v-show="show3">
          <div class="transition-box">
            京东（JD.com）是中国的一家自营式网络零售企业，
            于1998年6月18日由刘强东在北京中关村创立。
           它是中国著名B2C在线零售商，也是“财富”全球500强企业的成员，
           旗下设有京东商城、京东金融、京东智能、O2O及海外事业部等，
          于2014年5月在美国纳斯达克证券交易所上市（股票代码：JD），
          于2020年6月8日在中国香港上市
</div>
        </div>
      </el-collapse-transition>
    </div>
  </div>

      </div>

      <ul class="show">
        <li v-for="(img,index) in imgArray" v-show="index===mark" :key="index" id="cc">
          <img v-bind:src="img" />
        </li>
      </ul>

      <div class="bar">
        <span v-for="(item,index) in imgArray" :class="{'active':index===mark}" :key="index"></span>
      </div>
    </div>

    <div id="mian">
      <p id="pdgc">热门推荐</p>
      <ul class="show1">
        <!-- 不同品展示 -->
        <li id="child">
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(img,index) in imgArray4" :key="index">
         
          <img v-bind:src="img" />
      
            </el-carousel-item>
          </el-carousel>
        </li>
        <li v-for="(img,index) in imgArray1" :key="index">
          <img v-bind:src="img" />
          <br />
          <!-- 图片里面的类容 -->
         
        </li>
      </ul>

      <p id="pdgc">手机人气新品</p>

      <ul class="show1">
        <li v-for="(img,index) in imgArray2" :key="index">
          <img v-bind:src="img" />
        </li>
      </ul>

      <p id="pdgc">为你推荐</p>

      <ul class="show1">
        <li v-for="(img,index) in imgArray3" :key="index">
          <img v-bind:src="img" />
        </li>
      </ul>
      <hr />
    </div>

    <!-- 底部的版权信息一些 -->

    <div id="footer">
      <ul>
        <li v-for="(item,index) in list" :key="index">{{item.name}}</li>
      </ul>
      <ul>
        <li v-for="(item,index) in list1" :key="index">{{item.name}}</li>
      </ul>
      <ul>
        <li v-for="(item,index) in list2" :key="index">{{item.name}}</li>
      </ul>
      <ul>
        <li v-for="(item,index) in list3" :key="index">{{item.name}}</li>
      </ul>
      <ul>
        <li v-for="(item,index) in list4" :key="index">{{item.name}}</li>
      </ul>
      <ul>
        <li v-for="(item,index) in list5" :key="index">{{item.name}}</li>
      </ul>
    </div>
  </div>



  <!-- 指示器 -->


  </div>
</template>

<script>
export default {
  name: "welcom",
  data() {
    return {
      mark: 0,
      imgArray: [
        require("@/assets/101.jpg"),
        require("@/assets/102.jpg"),
        require("@/assets/103.jpg")
      ],
      imgArray1: [
        require("@/assets/20.png"),
        require("@/assets/21.png"),
        require("@/assets/22.png"),
        require("@/assets/23.png"),
        require("@/assets/24.png"),
        require("@/assets/25.png"),
        require("@/assets/26.png"),
        require("@/assets/27.png"),
        require("@/assets/28.png"),
        require("@/assets/29.png"),
        require("@/assets/30.png"),
        require("@/assets/35.png"),
        require("@/assets/34.png"),
        require("@/assets/33.png"),
        require("@/assets/32.png"),
        require("@/assets/31.png")
      ],
      imgArray2: [
        require("@/assets/31.png"),
        require("@/assets/32.png"),
        require("@/assets/33.png"),
        require("@/assets/34.png"),
        require("@/assets/35.png"),
        require("@/assets/36.png"),
        require("@/assets/37.png"),
        require("@/assets/38.png"),
        require("@/assets/39.png"),
        require("@/assets/40.png"),
        require("@/assets/41.png"),
        require("@/assets/42.png")
      ],
       imgArray3: [
        require("@/assets/49.png"),
        require("@/assets/48.png"),
        require("@/assets/47.png"),
        require("@/assets/46.png"),
        require("@/assets/45.png"),
        require("@/assets/44.png"),
        require("@/assets/42.png"),
        require("@/assets/37.png"),
        require("@/assets/39.png"),
        require("@/assets/38.png"),
        require("@/assets/36.png"),
        require("@/assets/35.png")
      ],
       imgArray4: [
       require("@/assets/49.png"),
        require("@/assets/38.png"),
        require("@/assets/47.png"),
        require("@/assets/46.png"),
        require("@/assets/45.png")
      ],
      list: [
        { name: "购物流程" },
        { name: "会员介绍" },
        { name: "生活旅行" },
        { name: "常见问题" },
        { name: "大家电" },
        { name: "联系商家" }
      ],
      list2: [
        { name: "上门自提" },
        { name: "211限时达" },
        { name: "配送服务查询" },
        { name: "常见问题" },
        { name: "配送费收取标准" },
        { name: "海外配送" }
      ],
      list3: [
        { name: "货到付款" },
        { name: "在线支付" },
        { name: "分期付款" },
        { name: "公司转账" },
        { name: "大家电" },
        { name: "联系商家" }
      ],
      list1: [
        { name: "售后政策" },
        { name: "价格保护" },
        { name: "退款说明" },
        { name: "返修/退换货" },
        { name: "取消订单" }
      ],
      list4: [
        { name: "夺宝岛" },
        { name: "DIY装机" },
        { name: "延保服务" },
        { name: "京东IE" },
        { name: "京东通讯" },
        { name: "京东智能插座" }
      ],
      list5: [
        {
          name:
            "京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。"
        }
      ]
    };
  },
   show3: true,
  methods: {
    autopaly() {
      this.mark++;
      if (this.mark === 3) {
        this.mark = 0;
      }
    },
    paly() {
      setInterval(this.autopaly, 2000);
    }
  },
  created() {
    this.paly();
  }
};
</script>

<style>
.bbb{
  width:1300px;
}
#reightbox {
  width: 1000px;
  height: 525px;
  background: rgb(0, 89, 255);
  z-index: 10000;
  position: relative;
  top: 60px;
  left: 510px;
  opacity: 0;
}
.slideshow {
  width: 1800px;
  height: 528px;
  margin: auto;
}
#left {
  width: 300px;
  height: 530px;
  background: url(../assets/9.png);
  background-repeat: no-repeat;
  z-index: 100;
  float: left;
  margin-top: 5px;
}
#left ul {
  list-style: none;
}
a {
  text-decoration: none;
  display: block;
  margin-left: 88px;
  margin-top: 5px;
  color: lavender;
}
.onn:hover #reightbox {
  background: rgb(107, 81, 81);
  opacity: 1;
}
.slide {
  margin: auto;
}
.slideshow img {
  height: 530px;
  width: 69%;
  /* margin-left: 0;
    m
    argin-top: 0px; */
}
.show1 img {
  height: 200px;
  width: 195px;
  margin-left:5px;
    /* m
    argin-top: 0px; */
}
.show li {
  list-style: none;
}
.show {
  width:1450px;
  padding: 0;
  margin-top: -1.5%;
  margin-left: -1.5%;
}
.show1 li {
  list-style: none;
  display: inline-block;
  cursor: pointer;
}
.bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: honeydew;
  display: inline-block;
  margin-left: 5px;
  position: relative;
  top: -50px;
  left: 550px;
}
.active {
  background: hotpink !important;
}
#pdgc {
  width: 100%;
  height: 40px;
  text-align: center;
  font-size: 50px;
   font-weight:900;
   color: salmon;
  position: relative;
}
#item {
  list-style: none;
}
#mian {
  position: relative;
  top: -48px;
  margin: auto;
  width: 1300px;

}

#footer ul {
  width: 200px;
  height: 200px;
  background: blueviolet;
  float: left;
  padding: 0;
  list-style: none;
  text-align: center;
  margin-left: 1%;
}
#mainone li {
  width: 100px;
  background: red;
  position: relative;
  top: -50px;
  margin-left: 10px;
}
#child {
  width: 400px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
 .transition-box {
    margin-bottom: 10px;
    margin-left: 130px;
    margin-top: -20px;
    width: 170px;
    height: 490px;
    border-radius: 4px;
    background-color: #409EFF;
    color: #fff;
    box-sizing: border-box;
    margin-right: 20px;
  }
  .show1  img:hover{
    opacity: 0.8;
    
  }
</style>
